<!--- table组件  :height="tableHeight"-->
<template>
  <el-table
    ref="eleTable"
    border
    style="width: 100%"
    :class="className"
    :height="height || tableHeight"
    :data="tableData"
    v-bind="$attrs"
    v-on="$listeners"
    v-loading="loading"
  >
    <template v-if="isHasIndex">
      <el-table-column
        type="index"
        width="50"
        align="center"
        label="序号"
        fixed="left"
      >
      </el-table-column>
    </template>
    <template v-for="(item, inx) in tableHeaderItems">
      <el-table-column
        v-if="item.type && !item.isHidden"
        :type="item.type"
        :key="inx"
        :prop="item.value"
        :align="item.align || 'left'"
        :label="item.name"
        :fixed="item.fixed || false"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :sortable="item.sortable || false"
        :width="item.width || 'auto'"
        @sort-change="$parent[item.sortChange]"
      >
        <template slot-scope="scope">
          <template v-if="item.render">
            <renderComponent
              :row="scope.row"
              :index="scope.$index"
              :column="scope.column"
              :render="item.render"
              @click="tapAction($event, scope.row, scope.column, scope.$index)"
            />
          </template>
          <template v-else-if="item.slot">
            <slot :name="item.slot" :data="scope"></slot>
          </template>
          <template v-else>
            <span>{{ isBlank(scope, item) }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!item.type && !item.isHidden"
        :key="inx"
        :prop="item.value"
        :align="item.align || 'left'"
        :label="item.name"
        :fixed="item.fixed || false"
        :sortable="item.sortable || false"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :width="item.width || 'auto'"
        @sort-change="$parent[item.sortChange]"
      >
        <template slot-scope="scope">
          <template v-if="item.render">
            <el-tooltip class="item" effect="dark" :disabled="!item.tooltip" :content="item.tooltip" placement="top-start">
              <renderComponent
                :row="scope.row"
                :index="scope.$index"
                :column="scope.column"
                :render="item.render"
                @click="tapAction($event, scope.row, scope.column, scope.$index)"
              />
            </el-tooltip>
          </template>
          <template v-else-if="item.slot">
            <slot :name="item.slot" :data="scope"></slot>
          </template>
          <template v-else>
            <span>{{ isBlank(scope, item) }}</span>
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
const renderComponent = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    editKey: String,
    editValue: [String, Object],
    column: {
      type: Object,
      default: null,
    },
  },
  render: (h, ctx) => {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index,
      listeners: ctx.listeners,
      editKey: ctx.editKey,
      editValue: ctx.editValue,
    };
    if (ctx.props.column) params.column = ctx.props.column;
    const renderJSX = ctx.props.render(h, params);
    return renderJSX;
  },
};
export default {
  props: {
    // * 是否展示序号
    isHasIndex: {
      type: Boolean,
      default: true,
    },
    // * 字段列表
    tableHeaderItems: {
      type: Array,
      default: [],
    },
    // * 列表数据
    tableData: {
      type: Array,
      default: [],
    },
    // * 加载状态
    loading: {
      type: Boolean,
      default: false,
    },
    // * 样式类名
    className: {
      type: String,
      default: "",
    },
    // * table高度
    height: {
      type: String,
      default: "",
    },
  },
  created() {
    if (!this.height) {
      this.$nextTick(() => {
        this.refreshTableEle();
      });
      window.addEventListener("resize", this.refreshTableEle);
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.refreshTableEle);
  },
  methods: {
    // 空白填充--
    isBlank(scope) {
      let key = scope.column.property,
        item = scope.row[key],
        value = "--";
      if (item || item === 0) {
        value = item;
      }
      return value;
    },
    // 操作 column, cell, event
    tapAction(tap, row, column, index) {
      const eventName = typeof tap === "string" ? tap : tap.eventName;
      const _event = this.$parent[eventName] || this.$parent.$parent[eventName];
      _event(row, column, index, tap);
    },
    // * 刷新表格
    refreshTableEle() {
      this.$refs.eleTable.doLayout();
    },
  },
  data() {
    return {
      tableHeight: "100%",
    };
  },
  components: {
    renderComponent,
  },
};
</script>

<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
.el-table {
  th.el-table__cell {
    padding: 10px 0;
  }
  th.el-table__cell > .cell {
    font-size: 14px;
    font-weight: normal;
  }
  .el-table__body-wrapper,
  .el-table__fixed-body-wrapper {
    .el-table__cell {
      padding: 8px 0;
    }
    .cell {
      color: #212121;
    }
  }
  .circle {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
  }
  .font-color-base {
    color: $main-font-color;
    span.circle {
      background: $main-font-color;
    }
  }
  .font-color-themn {
    color: $--color-primary;
    span.circle {
      background: $--color-primary;
    }
  }
  .font-color-auxiliary {
    color: $main-font-color-auxiliary;
  }
  .font-color-green {
    color: $main-font-color-green;
    span.circle {
      background: $main-font-color-green;
    }
  }
  .font-color-blue {
    color: $main-color-sub;
    span.circle {
      background: $main-color-sub;
    }
  }
  .font-color-origin {
    color: $main-font-color-origin;
    span.circle {
      background: $main-font-color-origin;
    }
  }
  .font-color-red {
    color: $main-font-color-dangerous;
    span.circle {
      background: $main-font-color-dangerous;
    }
  }
  .font-color-close {
    color: $main-font-color-close;
    span.circle {
      background: $main-font-color-close;
    }
  }
  span.table-btn {
    margin: 0;
    display: inline-block;
    white-space: nowrap;
    &:nth-child(even) {
      padding: 0 10px;
    }
  }
  .table-blue-btn {
    color: #00a1d6;
  }
  .table-static-btn {
    color: $--color-primary;
  }
  .table-del-btn {
    color: red;
  }
  .el-table__body-wrapper .cell,
  .el-table__fixed-body-wrapper .cell {
    font-size: 13px;
  }
  .table-image {
    border: 1px solid $main-color-sub;
    border-radius: 3px;
    cursor: pointer;
  }
  .disabled {
    opacity: 0.3;
    cursor: no-drop;
    pointer-events: none;
  }
  .expand-cost-table {
    padding: 15px;
  }
  .expand-pagination-box {
    padding-top: 15px;
    text-align: center;
  }
  div.el-progress > div.el-progress__text {
    font-size: 12px !important;
  }
  .td-pdf-icon {
    cursor: pointer;
  }
  &.el-table--scrollable-y {
    .el-table__fixed-right {
      border-left: 1px solid #ebeef5;
    }
  }
}
// .el-table.expand-table-box {
//   .el-table__body-wrapper > table > tbody > tr:nth-child(2) > td.el-table__cell,
//   .el-table__fixed-body-wrapper
//     > table
//     > tbody
//     > tr:nth-child(2)
//     > td.el-table__cell {
//     padding: 8px;
//   }
// }
</style>
